<template>
	<view class="content">
		<view></view>
		
		<view class="date-picker">
			<view class="all-btn">
				<picker  :range="array" range-key="name"  @change="bindcateChange">
					<view class="all-btnin">
						<view class="all-btninr1">{{catename?catename:'请选择'}}	</view>
						<view> <uni-icons type="down" size="14" color="#9CA3AF" class="input-icon"></uni-icons></view>	
					</view>
				</picker>
			</view>
			<view class="all-btnr">
				
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="all-btninr">
						<view class="all-btninr1">{{date?date:'请选择'}}	</view>
						<view> <uni-icons type="list" size="14" color="#9CA3AF" class="input-icon"></uni-icons></view>	
					</view>
					
				</picker>
				
			
			</view>
		</view>


		<view v-for="(client, index) in clients" :key="index" class="client-card" @click="viewClientDetail( client.id )">
			<view class="client-header">
				<text class="client-name">{{ client.title }}</text>
				<view class="level-tag">
					{{ client.cate_name }}
				</view>
			</view>
			<view class="client-info">
				<text class="info-item">客户地址 : {{ client.address }}</text>
				<text class="info-item">联系电话 : {{ client.mobile }}</text>
				<text class="info-item">分配时间 : {{ client.gettime }}</text>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import { curl } from 'common/api.js';
	export default {
		data() {
			return {
				statusBarHeight: 20,
				catename:'',
				cateid:'',
				array:[],
				info: {},
				clients: [],
				date:''
			}
		},
		onLoad() {
			let statusBarObj = uni.getSystemInfoSync();
			console.log(statusBarObj);
			this.statusBarHeight = statusBarObj.statusBarHeight;
		},
		onShow() {
			var that = this;
			curl('index/getcate', {}).then((res) => {
				console.log(res);
				that.array = res.data
			});
			
			this.getmerch();
			
		},
		methods: {
			
			viewClientDetail(ret){
				
				console.log(ret);
				uni.navigateTo({
					url:"/pages/index/info?id="+ret
				})
			},
			bindcateChange(ret){
				var i=ret.detail.value;
				var array=this.array;
				
				this.catename=array[i].name;
				this.cateid=array[i].id;
				
				this.clients=[];
				
				this.getmerch();
			},
			
			bindDateChange(ret){
				this.date=ret.detail.value;
				this.clients=[];
				this.getmerch();
			},
			
			getmerch(){
				
				var that=this;
				
				var date=this.date;
				var cateid=this.cateid;
				
				curl('Merchlist/getmymerch', {date:date,cateid:cateid}).then((res) => {
					console.log(res.data);
					that.clients=res.data
				});
				
			},
			
			nexturl() {
				
		
				uni.navigateTo({
					url: '/pages/lists/lists'
				})
			}
		}
	}
</script>

<style>
	@import url('@/static/css/index.css');

	page {
		height: 100%;
		background-color: #F5F5F5;
	}
	
	.all-btnr{
		width: 430rpx;height: 80rpx;margin-left: 20rpx;
		border: 1px solid #E5E5E5;
		border-radius: 10rpx;
	}
	.all-btninr1{
		margin-left: 10rpx;
	}
	.all-btninr{
		width: 400rpx;height: 80rpx;
		display: flex;align-items: center;
		font-size: 28rpx;
		justify-content: space-between;
	}
	
	
	.leftp{
		margin-right: 10rpx;
	}
	.all-btnin{
		width: 200rpx;height: 80rpx;margin-left: 20rpx;
		display: flex;align-items: center;
		font-size: 28rpx;
		justify-content: space-between;
	}
	.all-btn{
		width: 250rpx;height: 80rpx;
		border: 1px solid #E5E5E5;
		border-radius: 10rpx;
	}
	
	.date-picker{
		width: 700rpx;height: 90rpx;margin:20rpx auto;
		display: flex;align-items: center;
	}

	/* 客户列表 */
	.client-list {
		flex: 1;
		padding: 0 32rpx;
		overflow: auto;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 400rpx;
	}

	.empty-text {
		margin-top: 24rpx;
		font-size: 28rpx;
		color: #999999;
	}

	.client-card {
		width: 680rpx;
		height: auto;
		margin: auto;
		margin-bottom: 10rpx;
		margin-bottom: 24rpx;
		padding: 12rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.client-header {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.client-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
	}

	.level-tag {
		margin-left: 16rpx;
		padding: 2rpx 8rpx;
		border-radius: 8rpx;
		background: #797bff;
		color: #FFFFFF;font-size: 20rpx;
	}



	.client-info {
		display: flex;
		flex-direction: column;
	}

	.info-item {
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 12rpx;
	}

	.info-item:last-child {
		margin-bottom: 0;
	}

	.loading-more {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24rpx 0;
	}

	.loading-more text {
		margin-left: 12rpx;
		font-size: 28rpx;
		color: #999999;
	}
</style>